<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="field">
    <div id="box"></div>
    <h1 id="info"></h1>
    <script>
        var oField = document.getElementById('field')
        oField.onkeypress = function(e) {
            console.log(e.charCode);
            // 根据用户输入的字符的字符码
            // 数字0-9 字符码48-57
            // 小写字母a-z 字符码97-122
            if (!(e.charCode >= 48 && e.charCode <= 57 || e.charCode >= 97 && e.charCode <= 122)) {
                // 阻止浏览器默认事件
                e.preventDefault();
            }
        }
    </script>
</body>

</html>